Skip to content

feat(spx-gui): reminder for mobile devices and old browsers #2819

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Open
cn0809 wants to merge 5 commits into
base: dev
Choose a base branch
from
Open

feat(spx-gui): reminder for mobile devices and old browsers #2819

cn0809 wants to merge 5 commits into from

Conversation

@cn0809
Copy link
Collaborator

@cn0809 cn0809 commented Feb 6, 2026 •
edited
Loading

close: #2650
close: #2557

@gemini-code-assist
Copy link

gemini-code-assist bot commented Feb 6, 2026

Summary of Changes

Hello @cn0809, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

This pull request enhances the user experience by implementing a mobile device detection mechanism. Upon detecting a mobile device, the application now presents a dedicated 'Desktop Required' guide, informing users about the platform's desktop-only support and providing a quick way to copy the access URL for use on a desktop. This change addresses issue #2650, ensuring users are appropriately guided when accessing the application from unsupported devices.

Highlights

  • Mobile Device Detection: Implemented robust logic to detect if the application is being accessed from a mobile device, considering user agent, touch capabilities, and screen width.
  • Desktop Required Guide: Introduced a new component, DesktopRequiredGuide, which displays a user-friendly message indicating that the application is not supported on mobile devices.
  • Conditional Application Rendering: The main application content is now conditionally rendered; if a mobile device is detected, the DesktopRequiredGuide is displayed instead, preventing unsupported mobile usage.
  • Copy Access URL Functionality: The DesktopRequiredGuide includes a convenient button allowing users to copy the current access URL to their clipboard, facilitating a smooth transition to a desktop environment.

🧠 New Feature in Public Preview: You can now enable Memory to help Gemini Code Assist learn from your team's feedback. This makes future code reviews more consistent and personalized to your project's style. Click here to enable Memory in your admin console.

Changelog
  • spx-gui/src/App.vue
    • Added ref and onMounted imports from 'vue' for state management and lifecycle hooks.
    • Integrated DesktopRequiredGuide component import.
    • Implemented isMobile reactive variable to store device detection status.
    • Added an onMounted hook to perform mobile device detection using navigator.userAgent, ontouchstart property, navigator.maxTouchPoints, and window.matchMedia.
    • Modified the template to conditionally render DesktopRequiredGuide if isMobile is true, otherwise rendering the existing UIMessageProvider and its children.
  • spx-gui/src/components/mobile/DesktopRequiredGuide.vue
    • New component added to display a 'Desktop Required' message.
    • Includes an image (desktop-required.png), a title, and a descriptive paragraph, all supporting internationalization (English and Chinese).
    • Features a 'Copy Access URL' button that copies the current URL to the clipboard.
    • Displays a 'Copied to clipboard!' success message temporarily after the URL is copied.
    • Styled with scoped SCSS to center content and provide a clear visual guide.
Activity
  • No specific activity (comments, reviews, progress updates) has been recorded for this pull request yet.
Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature Command Description
Code Review /gemini review Performs a code review for the current pull request in its current state.
Pull Request Summary /gemini summary Provides a summary of the current pull request in its current state.
Comment @gemini-code-assist Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help /gemini help Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Footnotes

  1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

gemini-code-assist[bot]
gemini-code-assist bot reviewed Feb 6, 2026
View reviewed changes
Copy link

@gemini-code-assist gemini-code-assist bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Code Review

This pull request introduces a feature to display a guide for users on mobile devices, informing them that the application is intended for desktop use. The changes include adding mobile detection logic in the main App.vue component and creating a new DesktopRequiredGuide.vue component for the message.

My review focuses on improving code structure and robustness. I've suggested extracting the mobile detection logic into a reusable composable for better maintainability. I've also pointed out a potential issue in the new component where clipboard operations could fail silently, and I've provided a suggestion to make it more robust by adding error handling.

Overall, the changes are well-implemented to address the issue. The suggestions are aimed at improving the code quality further.

@cn0809 cn0809 changed the title feat(spx-gui): reminder for mobile devices feat(spx-gui): reminder for mobile devices and old browsers Feb 11, 2026
@cn0809 cn0809 marked this pull request as ready for review February 11, 2026 02:15
Copilot AI review requested due to automatic review settings February 11, 2026 02:15
Copilot AI reviewed Feb 11, 2026
View reviewed changes
Copy link
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Adds user-agent based reminders in spx-gui to (1) block unsupported mobile usage with a dedicated screen and (2) warn users on older/unsupported browser versions.

Changes:

  • Introduce src/utils/ua.ts for UA parsing, mobile detection, and browser version checks.
  • Add MobileReminder full-page component and BrowserVersionReminder dialog, wiring both into App.vue.
  • Add ua-parser-js dependency and associated lockfile updates.

Reviewed changes

Copilot reviewed 5 out of 7 changed files in this pull request and generated 6 comments.

Show a summary per file
File Description
spx-gui/src/utils/ua.ts UA parsing utilities + browser version compatibility check logic.
spx-gui/src/components/ua/desktop-required.png New image asset for the mobile reminder screen.
spx-gui/src/components/ua/MobileReminder.vue Full-page “desktop required” reminder with copy-URL action.
spx-gui/src/components/ua/BrowserVersionReminder.vue Modal dialog warning for unsupported/old browser versions.
spx-gui/src/App.vue Integrates mobile gating + browser version reminder into the app root.
spx-gui/package.json Adds ua-parser-js dependency.
spx-gui/package-lock.json Locks ua-parser-js and transitive deps (incl. license metadata).
Files not reviewed (1)
  • spx-gui/package-lock.json: Language not supported

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

xgopilot[bot]
xgopilot bot reviewed Feb 11, 2026
View reviewed changes
xgopilot[bot]
xgopilot bot reviewed Feb 11, 2026
View reviewed changes
xgopilot[bot]
xgopilot bot reviewed Feb 11, 2026
View reviewed changes
xgopilot[bot]
xgopilot bot reviewed Feb 11, 2026
View reviewed changes
xgopilot[bot]
xgopilot bot reviewed Feb 11, 2026
View reviewed changes
@cn0809
Copy link
Collaborator Author

cn0809 commented Feb 11, 2026

/review

xgopilot[bot]
xgopilot bot reviewed Feb 11, 2026
View reviewed changes
xgopilot[bot]
xgopilot bot reviewed Feb 11, 2026
View reviewed changes
xgopilot[bot]
xgopilot bot reviewed Feb 11, 2026
View reviewed changes
xgopilot[bot]
xgopilot bot reviewed Feb 11, 2026
View reviewed changes
xgopilot[bot]
xgopilot bot reviewed Feb 11, 2026
View reviewed changes
xgopilot[bot]
xgopilot bot reviewed Feb 11, 2026
View reviewed changes
xgopilot[bot]
xgopilot bot reviewed Feb 11, 2026
View reviewed changes
@xgopilot
Copy link
Contributor

xgopilot bot commented Feb 11, 2026

Code Review Summary

This PR successfully implements mobile device detection and browser version checking with clean UI components and proper i18n support. The implementation is functional and well-structured.

Strengths:

  • Clean component architecture with proper Vue 3 Composition API usage
  • Good UX with "Do not show again" functionality
  • Proper i18n support for both English and Chinese
  • Good use of v-radar directives for accessibility tracking

Key Recommendations:

  1. Performance: Consider replacing ua-parser-js (~25KB) with a lightweight regex for mobile detection
  2. Error handling: Add try-catch blocks around localStorage operations
  3. Documentation: Add JSDoc for complex functions like checkBrowserVersion()
  4. Optimization: Lazy-load the reminder components to reduce initial bundle size

No security vulnerabilities identified. The code follows secure practices with proper XSS protection through Vue's template syntax.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

Copilot code review Copilot Copilot left review comments

@xgopilot xgopilot[bot] xgopilot[bot] left review comments

+1 more reviewer

@gemini-code-assist gemini-code-assist[bot] gemini-code-assist[bot] left review comments

Reviewers whose approvals may not affect merge requirements

At least 1 approving review is required to merge this pull request.

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

Reminder for mobile devices Notification for old browsers

1 participant

@cn0809